<template>
  <el-dialog :visible.sync="isShow" center class="waitingAccepting-info">
    <h1 class="waitingAccepting-info_title">{{orderData.order_number}}</h1>
    <a id="JS_DOWNLOAD" href ref="JS_DOWNLOAD"></a>
    <el-form :model="orderData" class="form">
      <el-row type="flex">
        <el-col :span="12">
          <el-form-item label="专利名称：">
            <span>{{orderData.patent_name}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="专利类型：">
            <span>{{orderData.type}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex">
        <el-col :span="12">
          <el-form-item label="订单状态：">
            <span :color="orderData.status == '已撤案' ? 'red' : 'green'">{{orderData.status}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联络人：">
            <span>{{orderData.liaisons}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex">
        <el-col :span="12">
          <el-form-item label="联络人邮箱：">
            <span>{{orderData.liaisons_email}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联络人电话：">
            <span>{{orderData.liaisons_tel}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex">
        <el-col :span="12">
          <el-form-item label="代理人：">
            <span
              v-if="orderData.agent"
              :color="orderData.agent.type =='离职'?'red':'green'"
            >{{orderData.agent | agentNumAddName}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="专属顾问：">
            <span
              class="font_success"
              v-if="orderData.process"
            >{{orderData.process | processNumber}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex">
        <el-col :span="24">
          <el-form-item label="技术问题：">
            <span>{{orderData.problem}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex">
        <el-col :span="24">
          <el-form-item label="技术方案：">
            <span>{{orderData.plan}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex">
        <el-col :span="24">
          <el-form-item label="项目优势：">
            <span>{{orderData.advantage}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex">
        <el-col :span="24">
          <el-form-item label="备注：">
            <span>{{orderData.remarks}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex">
        <el-col :span="12">
          <el-form-item label="附图：">
            <div v-if="orderData.img != '' || orderData.img != null" class="preview-img-wrap">
              <pre-img :smallImg="orderData.imgList" :bigImg="orderData.imgList2" class="pre-img"></pre-img>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="附件：">
            <div
              v-if="orderData.file != '' || orderData.file != null"
              style="height: 40px;-webkit-display:flex;
              display:flex;
              -webkit-align-items:center;
              align-items:center;"
            >
              <a
                v-for="item in orderData.fileArr"
                :key="item.id"
                :href="baseUrl + '/api/download?path='  + item.file +'/'+ item.path"
                :download="item.path"
                :title="item.path"
                class="el-icon-tickets file_sh"
              ></a>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="btns tc mt10" v-if="showBtn">
      <el-button v-no-more-click:3000 type="danger" size="small" @click="orderTaking(orderData)">接单</el-button>
    </div>

    <!-- 修改资料 -->
    <editDialog ref="editInfo"></editDialog>
  </el-dialog>
</template>

<script>
import preImg from "~/components/pre-img";
import { getMyStatistics } from "~/api/user";
import { downloadedOrderWord } from "~/api/order";
import editDialog from "~/components/editDialog"; //修改邮箱弹出层
export default {
  components: {
    preImg,
    editDialog,
  },
  data() {
    return {
      showBtn: false,
      isShow: false,
      orderData: {
        oorder_number: "",
        patent_name: "",
        type: "",
        status: "",
      },
      order_id: null,
      baseUrl: global.baseurl,
      downloadDOM: "",
    };
  },
  mounted() {
    this.downloadDOM = document.getElementById("JS_DOWNLOAD");
  },
  methods: {
    async getMyStatistics(params) {
      let data = await getMyStatistics(this.$axios, params);
      if (data.data.status == "success") {
        this.$store.commit("setUserStatistics", data.data.data);
      }
    },

    show(data) {
      this.order_id = data.id;
      this.getInfo();
      this.isShow = true;
    },
    getInfo() {
      let params = {
        order: this.order_id,
      };
      this.$axios
        .get(`api/order/${this.order_id}`, { params: params })
        .then((res) => {
          if (res.data.code == 200) {
            this.interceptFile(res.data.data);
            this.orderData = res.data.data;
            this.showBtn = true;
          }
        });
    },
    interceptFile(data) {
      //图片 切分组件
      if (data.thumb_imgs == null || data.thumb_imgs == "") {
      } else {
        let img_Arr = data.thumb_imgs.split("&");
        let img_Arr2 = data.img.split("&");
        data.imgArr = [];
        data.imgList = [];
        data.imgList2 = [];
        for (const i in img_Arr2) {
          data.imgList2.push(global.baseurl + "/storage/upload/" + img_Arr2[i]);
        }
        for (const i in img_Arr) {
          let itemobj = {
            id: i + 1,
            path: img_Arr[i],
            file: "",
          };
          data.imgList.push(global.baseurl + "/storage/upload/" + img_Arr[i]);
          let itemArr = itemobj.path.split("/");
          itemobj.path = itemArr[itemArr.length - 1];
          itemobj.file = itemArr.slice(0, 2).join("/");
          data.imgArr.push(itemobj);
        }
      }

      //文件 切分组件
      if (data.file == null || data.file == "") {
      } else {
        let file_Arr = data.file.split("&");
        data.fileArr = [];
        for (const i in file_Arr) {
          let itemobj = {
            id: i + 1,
            path: file_Arr[i],
            file: "",
          };
          let itemArr = itemobj.path.split("/");
          itemobj.path = itemArr[itemArr.length - 1];
          itemobj.file = itemArr.slice(0, 2).join("/");
          data.fileArr.push(itemobj);
        }
      }
    },
    refresh(data) {
      this.$emit("refresh");
      this.getMyStatistics();
      this.isShow = false;
    },
    async download(id) {
      let data = await downloadedOrderWord(this.$axios, id);
      if (data.status == 200) {
        // this.downloadDOM.href = data.config.url
        // this.downloadDOM.click()
        this.$refs["JS_DOWNLOAD"].href = data.config.url;
        this.$refs["JS_DOWNLOAD"].click();
      }
    },

    // 代理接单
    orderTaking(val) {
      let agentObj = this.$store.state.user;
      let max_Time = 0;
      if (this.$store.state.user.vip > 0) {
        max_Time = 30;
      } else {
        max_Time = 25;
      }

      let params = {
        order: val.id,
      };
      this.$confirm("确认接单吗", "提示", {
        cancelButtonText: "取消",
        confirmButtonText: "确定",
        center: true,
        type: "warning",
      })
        .then(() => {
          this.$axios.put(`api/order/${params.order}/agency_order`, params).then(({ data }) => {
            if (data.status == "success") {
              this
                .$confirm(
                  `请在接单后的<i class="font_danger">${max_Time}</i>天内完成订单，如案件撰写超时，案件结算时将按<i class="font_danger">20</i>元/天扣费！是否下载接单文件？`,
                  "接单成功!",
                  {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    dangerouslyUseHTMLString: true,
                    center: true,
                  }
                )
                .then(() => {
                  this.download(val.id);
                })
                .catch(() => {});
              this.refresh();
            } else {
              this.$alert(data.message, "提示", {
                confirmButtonText: "确定",
                center: true,
                callback: (action) => {},
              });
            }
          });
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang='less' scoped>
.waitingAccepting-info {
  &_title {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: rgba(53, 53, 53, 1);
    margin-bottom: 20px;
  }
  /deep/.el-dialog {
    min-width: 600px;
    .el-dialog__close {
      font-size: 20px;
    }
    .el-dialog__body {
      padding-top: 10px;
    }
  }

  .el-form-item__content {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: rgba(53, 53, 53, 1);
    margin-bottom: 20px;
  }

  /deep/.form {
    .el-form-item {
      height: 100%;
      border: 1px solid #ccc;
      margin-right: -1px;
      margin-bottom: -1px;
      // border-bottom-width: 0;
      .el-form-item__label {
        // background:rgba(194,227,255,1);
        text-align: left;
        font-size: 15px;
        color: #555555;
        padding-left: 20px;
      }
      .el-form-item__content {
        // background:rgba(244,247,255,1);
        padding-left: 20px;
        text-align: left;
        color: #555555;
      }
    }
    .el-row {
      .el-col-12 {
        .el-form-item {
          border-bottom-width: 0;
        }
      }
      .el-col-24 {
        .el-form-item {
          border-bottom: 0px;
        }
      }
    }
    .el-row:last-child {
      .el-col-12 {
        .el-form-item {
          border-bottom-width: 1px;
        }
      }
    }
    .pre-img {
      margin-top: 8px;
    }
  }
}
</style>